<template>
<div class="page-container-padding" v-loading="pageDataLoading">
  <!-- 查询条件 -->
  <div style="display:flex;align-items:center;">
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      >
      </el-date-picker>
    </span>
    <span style="margin-left:6px;">
      <el-select style="width:130px;" v-model="statisticsType" size="mini">
        <el-option :value="0" label="默认统计方式"></el-option>
        <el-option :value="1" label="小组统计方式"></el-option>
      </el-select>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="dateRangeQuery">统计</el-button></span>
    <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">计本月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthQuery">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthQuery">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearQuery">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearQuery">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearQuery">下一年</el-button></span>
  </div>
  <!-- 显示统计结果 -->
  <div style="margin-top:10px; width:291px;">
    <div>短讯通统计表</div>
    <el-table border stripe :data="statisticsList" empty-text="暂无统计数据">
      <el-table-column prop="admin_name" label="姓名" width="90px" align="center">
        <template slot-scope="scope">
          <span style="cursor:pointer;" @click="userCacheChange(scope.row)">{{ scope.row.admin_name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total_count" label="数量" width="100px" align="right"></el-table-column>
      <el-table-column prop="audit_count" label="标记数" width="100px" align="right"></el-table-column>
    </el-table>
  </div>
  <div style="color:#F34D37;font-size:12px;margin-top:2px;">注：点击表中的用户名，可查看该人员的详细记录。</div>

  <!-- 显示详情表 -->
  <div style="margin-top:10px;">
    <div v-if="recordsShowList.length>0">
    <div class="msg-box" v-for="msgItem,index in recordsShowList" :key="index">
      <div class="msg-title">
        <span>{{ msgItem.create_date }}</span>
        <span class="msg-action"><i class="el-icon-delete-solid" @click="toDeleteMessage(msgItem)"></i></span>
      </div>
      <div class="msg-content">{{ msgItem.content }}</div>
      <div><span class="msg-author">{{ msgItem.admin_name }}</span></div>
    </div>
    <el-pagination style="margin-top:5px;"
      background
      layout="total, prev, pager, next, jumper"
      :current-page.sync="page"
      :page-size="pageSize"
      :total="totalCount"
      @current-change="currentPageChange">
    </el-pagination>
    </div>
    <div v-else>
      <el-empty description="查询条件无详情数据"></el-empty>
    </div>
  </div>
</div>
</template>

<script>
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
import { getShortMsgStatistics } from '@/api/departmentWork/shortMessage'
export default {
  data(){
    return {
      statisticsType: 0,
      pageDataLoading: false,
      dateRange: [],
      statisticsList: [],  // 统计表
      recordsCache: [],  // 存放统计表内的所有详情数据
      userRecordsCache: [],  // 当前点击的人员
      showFlag: 'total', // total or personal

      page: 1,
      pageSize:30,
      totalCount: 0,
      recordsShowList: [], // 当前显示的数据
      showDocxView: false
    }
  },
  mounted() {
    this.setCurrentDates()
    this.queryPageData()
  },
  methods:{
    setCurrentDates(){
      let flag = new Date().getDate() < 4 ? 'previous' : 'current'
      this.dateRange = getMonthDatePoint(new Date(), flag)
    },

    // 查询数据
    queryPageData(){
      const para = {
        start: datetimeToStr(this.dateRange[0], true, ''),
        end: datetimeToStr(this.dateRange[1], true, ''),
        st: this.statisticsType
      }

      this.pageDataLoading = true
      getShortMsgStatistics(para).then(res => {
        const data = res.data
        this.statisticsList = data.statistics
        this.recordsCache = data.records

        this.showFlag = 'total'
        this.totalCount = this.recordsCache.length
        this.page = 1
        this.showRecords(1)

        this.pageDataLoading = false
      }).catch(err => {
        this.pageDataLoading = false
      })
    },

    // 点击了统计表中的user
    userCacheChange(row){
      if (row.user_id === -1){
        this.userRecordsCache = this.recordsCache
      }else{
        this.userRecordsCache = this.recordsCache.filter(item => {
          return item.user_id === row.user_id
        })
      }

      this.showFlag = 'personal'
      this.totalCount = this.userRecordsCache.length
      this.page = 1
      this.showRecords(1)
    },

    currentPageChange(page){
      this.showRecords(page)
    },

    // 显示详情数据
    showRecords(page){
      const startIndex = (page-1)*this.pageSize
      if (this.showFlag === 'total'){
        this.recordsShowList = this.recordsCache.slice(startIndex, startIndex + this.pageSize)
      }else if (this.showFlag === 'personal'){
        this.recordsShowList = this.userRecordsCache.slice(startIndex, startIndex + this.pageSize)
      }
    },

    // 删除一个数据
    toDeleteMessage(){
      this.$baseMessage('功能未上线！', 'info')
    },

    // 指定日期范围查询
    dateRangeQuery(){
      this.queryPageData()
    },

    // 本月查询
    currentMonthQuery(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
      this.queryPageData()
    },

    // 上一月查询
    preMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryPageData()
    },

    // 下一月查询
    nextMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryPageData()
    },

    // 当前月份所在全年查询
    yearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryPageData()
    },

    // 上一年查询
    preYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryPageData()
    },

    // 下一年查询
    nextYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryPageData()
    }
  }
}
</script>

<style scoped lang="scss">
.show-action{opacity: 1;}
.msg-box{
  margin-bottom: 15px;
  padding: 10px;
  border-radius:4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  &:hover{
    background-color:rgba(0,0,0,0.1);
    .msg-title .msg-action{
      @extend .show-action;
    }
  }
  .msg-title{
    color: #0073FC;
    font-weight: 700;
    font-size:16px;
    .msg-action{
      margin-left:100px;
      color:#FF430D;
      font-size:13px;
      cursor:pointer;
      opacity: 0;
      transition: opacity .1s;
    }
  }
  .msg-content{
    line-height: 22px;
  }
  .msg-author{
    color:#fff;
    background-color:#b3cbf7;
    width:80px;
    padding:2px 4px;
    font-size:12px;
    border-radius:6px;
  }
}
</style>
